<template>
  <div class="whole-box">
    <a class="target" herf="" target="_blank"></a>
    <div class="firtbox">
      <h5 class="firt-img">
        <i class="fa fa-cubes"></i> 原创试卷
      </h5>
      <p class="firt-in">快速生成您高质量的试卷！</p>
    </div>
    <div class="secbox">
      <div class="headbox">
        <div class="btn">
          <el-button @click="creattype" type="primary" plain size="small">创建</el-button>
        </div>
        <div class="sec-img">
          <i class="fa fa-table fa-fw"></i> 试卷类型
        </div>
        <div class="firt-in">请选择一个您之前预置的试卷类型或直接创建一个</div>
        <br style="clear:both" />
      </div>
      <div class="bodybox">
        <el-table :data="typelist"
          stripe border
          highlight-current-row
          style="width: 100%"
          :default-sort="{prop:'scores', order: 'ascending'}">
          <!--指定默认排序 按分值升序  -->
          <el-table-column prop="name" label="类型名称" width="340"></el-table-column>
          <el-table-column prop="student.student" label="适用对象" width="120"></el-table-column>
          <el-table-column prop="scores" label="分值" sortable="custon" width="120"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <router-link  target="_blank" :to="{
                  path: '/view_pre_base',
                  query: {
                  	id: scope.row.id
              }}" ><el-button  type="success" plain>查看</el-button>
        </router-link>
              <el-button  type="primary" plain @click="chooseType(scope.row.id) ">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-pagination
          background
          :pager-count="5"
          layout="prev, pager, next"
          :total="total"
          class="page"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { postRequest } from "../utils/api"
import { getRequest } from "../utils/api"
import { putRequest } from "../utils/api"
import { postJsonRequest } from "../utils/api"
export default {
  name: "TypeChoose",
  components: {},
  data() {
    return {
      getInfo:{owner_id:1,},
      typelist:[
        // {
        //   id:1,
        //   name: "放假了给你们卷子	",
        // },
        
      ],
      total:0,
    }
  },
  //////////////////////
  //通过接口获取数据
  created() {
    this.getPrebases()

    
  },
  methods: {
    getPrebases:function(){
      var _this=this;
      postRequest("/pre_base/get_own_pre_bases", {
      owner_id:1,}).then(
      res => {
        var result = res.data;
        if(result.code==0){
          _this.typelist = result.data.list
          _this.total = result.data.total
          console.log(result)
        }else{
          this.$message.error("获取数据失败");
          

        }
      } 
    );

    },

    creattype() {
      this.$router.push("./new_pre_base");  
    },
    // 查看试卷类型--->新窗口打开
    // viewNewType(id){
    //   const {href} = this.$router.resolve({
    //     name:"查看预置类型",
    //     path:"/view_pre_base",
    //     query:{
    //       id: id,
    //       //id 为list中每行的id
    //       // viewprebase中用this.$route.query.id 接收id
    //     }
    //   });
    //   window.open(href,'blank');
    //   console.log(id);
    // },
    // 选择试卷---跳转到创建试卷窗口
    chooseType(id){
      this.$router.push(
        {
          path:'/creat_paper',
          query:{id:id }
        })
    },
    /* axios({
      method:'get',
      url:'/pre_base/get_own_pre_bases',
      data: {
        owner_id: 1,
      }
    }).then((res)=>{
      if (res.code == 0){
        var data = res.data;
        var pageNum = data.pageNum;
        var pageSize = data.pageSize;
        var total = data.total;
        var pages = data.pages;
        currentPage = pageNum;
        var tableData = data.list;
      }
      console.log(res)
      this.tableData=tableData 
    })*/
  }
};
</script>

<style scoped>
.whole-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.firtbox {
  padding: 5px 0px 15px 5px;
  position: relative;
  text-align: left;
  background-color: #ffffff;
  margin: 5px 5px 5px 0px;
  width: 100%;
  border-radius: 2px;
  box-sizing: border-box;
  box-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.firt-img {
  font-weight: 500;
  font-size: 13px;
  margin: 0;
  padding: 0;
}
.firt-in {
  font-size: 10px;
  color: #777777;
  height: 7px;
  margin: 0;
  padding: 0;
}
.secbox {
  padding-top: 4px;
  height: auto;
  background-color: #ffffff;
  margin: 15px auto auto 0%;
  width: 100%;
  text-align: left;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.headbox {
  margin: 0px;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  height: auto;
  width: 100%;
  position: relative;
  text-align: left;
  background-color: #ffffff;
  border-bottom: 1px solid;
  border-bottom-color: #f0efef;
}
.bodybox {
  margin: 0 0 0 0;
  padding: 10px 5px 0px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
}
.firt-in {
  font-size: 10px;
  color: #777777;
  height: 7px;
  margin: 0;
  padding: 0;
}
.sec-img {
  font-weight: 500;
  font-size: 16px;
  margin: 0 0 0 0;
  padding: 0px;
}
.btn {
  float: right;
  margin-top: 3px;
  margin-right: 20px;
}
.table {
  padding: 0 10px 0 10px;
}
.page {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 30px;
  float: right;
}
</style>